import React from "react";
import { Link, Route, Switch } from "react-router-dom";

import Hello from "./Hello";
import World from "./World";

export default function Home() {
  return (
    <div className="home">
      <h1>Home</h1>

      <div className="home_left">
        {/* 
          导航区
            to 属性，需要携带者之前的路由路径
         */}
        <Link className="link" to="/home/a">
          跳转 Hello
        </Link>
        <Link className="link" to="/home/b">
          跳转 World
        </Link>
      </div>
      <div className="home_right">
        {/* 展示区 Hello World*/}
        <Switch>
          <Route path="/home/a" component={Hello} />
          <Route path="/home/b" component={World} />
        </Switch>
      </div>
    </div>
  );
}
